| Conditions | 1 |
| Total Lines | 73 |
| Code Lines | 51 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import React, { Component } from "react" |
||
| 10 | render() { |
||
| 11 | const { goldSponsors, silverSponsors, bronzeSponsors } = this.props.data |
||
| 12 | return ( |
||
| 13 | <Layout> |
||
| 14 | <SEO |
||
| 15 | lang="nl-BE" |
||
| 16 | title="Sponsors" |
||
| 17 | description="Overzicht van de sponsors die KCVV Elewijt steunen." |
||
| 18 | path={this.props.location.pathname} |
||
| 19 | /> |
||
| 20 | <div className={"sponsors-overview__wrapper limited-width_wrapper"}> |
||
| 21 | <section |
||
| 22 | className={ |
||
| 23 | "sponsors-overview__section sponsors-overview__section--top" |
||
| 24 | } |
||
| 25 | > |
||
| 26 | {goldSponsors.edges.map(({ node }, i) => { |
||
| 27 | const website = |
||
| 28 | (node.field_website && node.field_website.uri) || `` |
||
| 29 | return ( |
||
| 30 | <Sponsor |
||
| 31 | key={i} |
||
| 32 | localFile={ |
||
| 33 | node.relationships.field_media_image.relationships |
||
| 34 | .field_media_image.localFile |
||
| 35 | } |
||
| 36 | uri={website} |
||
| 37 | /> |
||
| 38 | ) |
||
| 39 | })} |
||
| 40 | </section> |
||
| 41 | <section |
||
| 42 | className={ |
||
| 43 | "sponsors-overview__section sponsors-overview__section--middle" |
||
| 44 | } |
||
| 45 | > |
||
| 46 | {silverSponsors.edges.map(({ node }, i) => { |
||
| 47 | const website = |
||
| 48 | (node.field_website && node.field_website.uri) || "" |
||
| 49 | return ( |
||
| 50 | <Sponsor |
||
| 51 | key={i} |
||
| 52 | localFile={ |
||
| 53 | node.relationships.field_media_image.relationships |
||
| 54 | .field_media_image.localFile |
||
| 55 | } |
||
| 56 | uri={website} |
||
| 57 | /> |
||
| 58 | ) |
||
| 59 | })} |
||
| 60 | </section> |
||
| 61 | <section |
||
| 62 | className={ |
||
| 63 | "sponsors-overview__section sponsors-overview__section--bottom" |
||
| 64 | } |
||
| 65 | > |
||
| 66 | {bronzeSponsors.edges.map(({ node }, i) => { |
||
| 67 | const website = |
||
| 68 | (node.field_website && node.field_website.uri) || "" |
||
| 69 | return ( |
||
| 70 | <Sponsor |
||
| 71 | key={i} |
||
| 72 | localFile={ |
||
| 73 | node.relationships.field_media_image.relationships |
||
| 74 | .field_media_image.localFile |
||
| 75 | } |
||
| 76 | uri={website} |
||
| 77 | /> |
||
| 78 | ) |
||
| 79 | })} |
||
| 80 | </section> |
||
| 81 | </div> |
||
| 82 | </Layout> |
||
| 83 | ) |
||
| 189 |